<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>注册界面</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function judgeName() {
            var username = $("#username").val();
            if ($.trim(username) == "") {
                $("#nameError").html("<font color='red'>*用户名不能为空</font>");
            } else if ($.trim(username).length > 8
                || $.trim(username).length < 3) {
                $("#nameError").html("*用户名长度必须为3-18之间").css({
                    color: "red"
                });
            } else {
                var data = {
                    "username": username,
                }
                // alert(a);
                $.ajax({
                    type: "post",
                    url: "/registerName",
                    data: JSON.stringify(data),
                    success: function (result) {
                        // $("#nameError").val(result.result);
                        $("#nameError").html(result.result);
                    },
                    dataType: "json",
                    contentType: "application/json"
                })
            }
        }
    </script>

    <script>
        function judgePhone() {
            var phone = $("#phone").val();
            //校验手机号，号段主要有(不包括上网卡)：130~139、150~153，155~159，180~189、170~171、176~178。14号段为上网卡专属号段
            var correct = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
            if ($.trim(phone) == "") {
                $("#phoneError").html("<font color='red'>*手机号码不能为空</font>");
            } else if (!correct.test(phone)) {
                $("#phoneError").html("*请输入正确的手机号码").css({
                    color: "red"
                });
            } else {
                var data = {
                    "phone": phone,
                }
                $.ajax({
                    type: "post",
                    url: "/registerPhone",
                    data: JSON.stringify(data),
                    success: function (result) {
                        $("#phoneError").html(result.result);
                    },
                    dataType: "json",
                    contentType: "application/json"
                })
            }
        }
    </script>

    <script>
        function judgeEmail() {
            var email = $("#email").val();
            var correct = /^[a-zA-Z0-9]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
            if ($.trim(email) == "") {
                $("#emailError").html("<font color='red'>*邮箱地址不能为空</font>");
            } else if (!correct.test(email)) {
                $("#emailError").html("*请输入正确的邮箱地址").css({
                    color: "red"
                });
            } else {
                var data = {
                    "email": email,
                }
                $.ajax({
                    type: "post",
                    url: "/registerEmail",
                    data: JSON.stringify(data),
                    success: function (result) {
                        $("#emailError").html(result.result);
                    },
                    dataType: "json",
                    contentType: "application/json"
                })
            }
        }
    </script>

    <script>
        function judgePassword() {
            var password = $("#password").val();
            var correct = /^(?=.*[a-zA-Z])(?=.*[1-9])(?=.*[\W]).{6,}$/;
            if ($.trim(password) == "") {
                $("#passwordError").html("<font color='red'>*密码不能为空</font>");
            } else if (!correct.test(password)) {
                $("#passwordError").html("*6位或以上,要有大写字母,小写字母和数字,符号").css({
                    color: "red"
                })
            } else {
                $("#passwordError").html(" ");
            }

        }
    </script>

    <script>
        function onRegister() {
            var username = $("#username").val();
            var phone = $("#phone").val();
            var email = $("#email").val();
            var password = $("#password").val();
            var nameError = $("#nameError").html();
            var phoneError = $("#phoneError").html();
            var emailError = $("#emailError").html();
            var passwordError = $("#passwordError").html();
            var data = {
                "username": username,
                "phone": phone,
                "email": email,
                "password": password,
                "nameError": nameError,
                "phoneError": phoneError,
                "emailError": emailError,
                "passwordError": passwordError,
            }
            $.ajax({
                type: "post",
                url: "/register",
                data: JSON.stringify(data),
                success: function (result) {
                    // alert(result.error);
                    if("1"==result.error){
                        // alert("1"==result.error)
                        window.location.href = "/user/login";
                    }else {
                        alert("请重新注册")
                        window.location.href = "/register.jsp";
                    }
                },
                dataType: "json",
                contentType: "application/json"
            })
        }
    </script>
</head>
<body>
<%--<h2>注册</h2>--%>
<%--用户名:<input id="username" onblur="judgeName()"/> <span id="nameError"></span><br>--%>
<%--手机号:<input id="phone" onblur="judgePhone()"/> <span id="phoneError"></span><br>--%>
<%--邮 箱:<input id="email" onblur="judgeEmail()"/> <span id="emailError"></span><br>--%>
<%--密 码:<input id="password1" onblur="judgePassword()"/> <span id="passwordError"></span><br>--%>
<%--<button onclick="onRegister()">提交</button>--%>
<jsp:include page="page.jsp"></jsp:include>
<form style="margin-left:500px;margin-top:200px;" action="/user/register"  method="post">
    <div class="form-group">
        <label for="username" stype="display:inline;">用户名：</label>
        <input type="text" class="form-control" id="username" style="display:inline;width:200px;" autocomplete="off" onblur="judgeName()"/> <span id="nameError" style="color: red"></span>
    </div>
    <div class="form-group">
        <label for="phone" style="display:inline;">手机号：</label>
        <input type="text" class="form-control" id="phone" style="display:inline;width:200px;" autocomplete="off" onblur="judgePhone()"/> <span id="phoneError" style="color: red"></span>
    </div>
    <div class="form-group">
        <label for="email" style="display:inline;">邮 &nbsp;&nbsp;&nbsp;箱：</label>
        <input type="text" class="form-control" id="email" style="display:inline;width:200px;" autocomplete="off" onblur="judgeEmail()"/> <span id="emailError" style="color: red"></span>
    </div>
    <div class="form-group">
        <label for="password" style="display:inline;">密 &nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" class="form-control" id="password" style="display:inline;width:200px;" autocomplete="off" onblur="judgePassword()"/> <span id="passwordError" style="color: red"></span>
    </div>
    <button type="button" class="btn btn-primary" onclick="onRegister()" style="margin-right: 45px;margin-left: 70px">确认注册</button>
    <button type="button" class="btn btn-primary" onclick="doLogin2()" >登 录</button>
</form>
</body>
<script>
    function doLogin2() {
        window.location.href = "/user/login";
    }
</script>
</html>
